<html>
<head>
<title>ConvNetJS demo: Image Painting</title>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

<script src="../build/convnet.js"></script>
<script src="js/image_regression.js"></script>

<style type="text/css">
canvas { 
    border: 1px solid #555;
    margin-top: 10px;
}
#wrap {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 200px;
}
#gallery img {
  width: 195;
  height: 195px;
  display: inline-block;
}
</style>

</head>

<body>

<div id="wrap">
<h1><a href="http://cs.stanford.edu/people/karpathy/convnetjs/">ConvnetJS</a> demo: Image "Painting"</h1>

<p>This demo that treats the pixels of an image as a learning problem: it takes the (x,y) position on a grid and learns to predict the color at that point using regression to (r,g,b). It's a bit like compression, since the image information is encoded in the weights of the network, but almost certainly not of practical kind :)</p>
<p>
  Note that the entire ConvNetJS definition is shown in textbox below and it gets eval()'d to create the network, so feel free to fiddle with the parameters and hit "reload". I found that, empirically and interestingly, deeper networks tend to work much better on this task given a fixed parameter budget.
</p>

<p>Report questions/bugs/suggestions to <a href="https://twitter.com/karpathy">@karpathy</a>.</p>

<textarea id="layerdef" style="width:100%; height:250px;"></textarea>
<br /><br  />
<input id="buttontp" type="submit" value="reload network" onclick="reload();" style="width: 200px; height: 30px;"/>

<div style="float: right;">
Choose your own image: 
<input id="f" type="file" />
</div>

<br>

<div style="background-color: #EEE; padding: 10px; margin-top: 10px;">
<div style="float: left; margin-left: 200px;">
  Original Image<br>
  <canvas id="canv_original"></canvas>
</div>
<div style="float: left; margin-left: 10px;">
  Neural Network output<br>
  <canvas id="canv_net"></canvas>
</div>

<div style="clear:both;"></div>
</div>

<br>
<div id="report"></div>
<br>

<div id="lr">Learning rate:</div>
<div id="slider"></div>
<div>The learning rate should probably be decreased over time (slide left) to let the network better overfit the training data. It's nice to not have to worry about overfitting.</div>

<br><br>
<div>
  You can upload your own image above (click Choose File), or you can click on any of the images below to load them.
</div>
<div id="gallery">
  <img src="imgs/cat.jpg" class="ci" />
  <img src="imgs/esher.png"  class="ci" />
  <img src="imgs/pencils.png" class="ci" />
  <img src="imgs/usa.png"  class="ci" />
  <img src="imgs/fractal.jpg"  class="ci" />
  <img src="imgs/dora.jpg" class="ci" />
  <img src="imgs/rubiks.jpg" class="ci" />
  <img src="imgs/earth.jpg" class="ci" />
  <img src="imgs/fox.png" class="ci" />
  <img src="imgs/twitter.png" class="ci" />
  <img src="imgs/reddit.jpg" class="ci" />
  <img src="imgs/chip.jpg" class="ci" />
  <img src="imgs/jitendra.jpg" class="ci" />
  <img src="imgs/tesla.jpg" class="ci" />
  <img src="imgs/rainforest.jpg" class="ci" />
  <img src="imgs/chess.png" class="ci" />
  <img src="imgs/gradient.png" class="ci" />
  <img src="imgs/battery.jpg" class="ci" />
  <img src="imgs/starry.jpg" class="ci" />
</div>

<br><br>
<p>Go <a href="http://cs.stanford.edu/people/karpathy/convnetjs/">back to ConvNetJS</a></p>

</div>

</body>
</html>

